﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>多表头</title>
    <script type="text/javascript" src="../../Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="../../Scripts/QueryString.js" type="text/javascript"></script>
    <link href="../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />
    <!-- 引用通用的js文件. -->
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>
    <script src="../../Admin.js"></script>
    <script type="text/javascript" language="javascript">

        //执行类型.
        var doType = GetQueryString("DoType"); //执行类型.
        var multiTitle = null;  //表头
        var multiTitle1 = null; //表头1
        var mapAttrs = null;
        var enEntity = null; //存储数据的实体。
        var ensName = GetQueryString("EnsName");

        //页面启动函数.
        $(function () {

            //获得配置信息.
            var ensName = GetQueryString("EnsName");

            //执行类型.
            doType = GetQueryString("DoType");
            if (doType == null) doType = "Search";

            //根据不同的类型获取-全局配置.
            if (doType == "Search") {
                enEntity = new Entity("BP.Sys.EnCfg", ensName);

                //生成属性集合.
                mapAttrs = enEntity.DoMethodReturnJSON("GenerAttrs");
            }

            if (doType == "Dtl") {
                enEntity = new Entity("BP.Sys.MapDtl", ensName);

                //获得字段集合.
                mapAttrs = new Entities("BP.Sys.MapAttrs")
                mapAttrs.Retrieve("FK_MapData", ensName, "Idx");
            }

            if (doType == "Bill") {
                enEntity = new Entity("BP.Sys.MapData", ensName);

                //获得字段集合.
                mapAttrs = new Entities("BP.Sys.MapAttrs")
                mapAttrs.Retrieve("FK_MapData", ensName, "Idx");
            }

            //获得表头.
            multiTitle = enEntity.GetPara("MultiTitle");
            multiTitle1 = enEntity.GetPara("MultiTitle1");

            //是否是三级表头
            var isThrMulti = false;
            if (multiTitle1 == null || multiTitle1 == undefined || multiTitle1 == "" && multiTitle1 == "undefined")
                multiTitle1 = "";
            if (multiTitle1 != "")
                isThrMulti = true;

            //是否是二级表头
            var isSecMulti = false;
            if (multiTitle == null || multiTitle == undefined || multiTitle == "" || multiTitle == "undefined")
                multiTitle = "";
            if (isThrMulti == false && multiTitle != "")
                isSecMulti = true;

            var _html = "<table style='width:90%;'>";
            _html += "<caption><img style='margin-top:5px;'; src='../../Img/Event.png' />多表头</caption>";


            //一级表头
            if (isThrMulti == false && isSecMulti == false)
                _html = showTable(mapAttrs);
            //二级表头
            if (isSecMulti == true)
                _html = showSecTable(mapAttrs, multiTitle);
            //三级表头
            if (isThrMulti == true)
                _html = showThrTable(mapAttrs, multiTitle, multiTitle1);

            for (var idx = 0; idx < 3; idx++) {
                _html += "<tr>";
                for (var i = 0; i < mapAttrs.length; i++) {
                    var attr = mapAttrs[i];
                    if (attr.UIVisible == 0)
                        continue;
                    _html += "<td> &nbsp;&nbsp;</td>";
                }
                _html += "</tr>";
            }


            _html += "</table>";
            $("#Table").html(_html);

        });

        /**
         * 只有一级表头的解析
         * @param mapAttrs
         */
        function showTable(mapAttrs) {
            var _html = "<tr>";
            var idx1 = 0;
            for (var idx = 0; idx < mapAttrs.length; idx++) {
                var attr = mapAttrs[idx];
                if (attr.UIVisible == 0)
                    continue;
                idx1++;

                _html += "<th><label><input name='oneclo' id='" + attr.KeyOfEn + "' value='" + idx1 + "' type='checkbox'/>" + attr.Name + "</label></th>";
            }
            _html += "</tr>";
            return _html;
        }
        /**
         * 二级表头的解析
         * @param mapAttrs
         * @param multiTitle
         */
        function showSecTable(mapAttrs, multiTitle) {
            var _html = "<tr>";
            var _secHtml = "";
            var currentGroup = "";
            var idx1 = 0;
            var idx = 0;
            for (var i = 0; i < mapAttrs.length; i++) {
                var attr = mapAttrs[i];
                if (attr.UIVisible == 0)
                    continue;
                idx++;
                //判断该字段是否隶属于二级表头的分组
                if (multiTitle.indexOf("," + attr.KeyOfEn + ",") == -1)
                    _html += "<th rowspan=2><label><input name='oneclo' id='" + attr.KeyOfEn + "' value='" + idx + "' type='checkbox'/>" + attr.Name + "</label></th>";
                else {
                    var fields = getMutliFile(attr.KeyOfEn, multiTitle);
                    if (fields != "" && (currentGroup == "" || currentGroup != fields[0])) {
                        _html += "<th colspan=" + (fields.length - 1) + " style='text-align:center'><label><input name='twoclo' id='" + fields[0] + "' value='" + idx1 + "' type='checkbox'/>" + fields[0] + "</label>&nbsp;<button id='Btn_Delete' onclick=DeleteSpecTitle('" + fields[0] + "',0)> 删除</button></th>";
                        currentGroup = fields[0];
                        idx1++;
                    }
                    _secHtml += "<th>" + attr.Name + "</th>";
                }
            }
            _html += "</tr>";
            _html += "<tr>" + _secHtml + "</tr>";
            return _html;
        }
        /**
         * 三级表头的解析
         * @param mapAttrs
         * @param multiTitle
         * @param multiTitle1
         */
        function showThrTable(mapAttrs, multiTitle, multiTitle1) {
            var _html = "<tr>";
            var _secHtml = "";
            var _thrHtml = "";
            var curSecGroup = "";
            var curThrGroup = "";
            var idx1 = 0;
            var thrcolspan = 0;
            var isSecChange = false;
            for (var idx = 0; idx < mapAttrs.length; idx++) {
                var attr = mapAttrs[idx];
                if (attr.UIVisible == 0)
                    continue;
                idx1++;
                //判断这个字段是隶属于那个什么
                var keyIdx = 1;
                if (multiTitle.indexOf("," + attr.KeyOfEn + ",") != -1)
                    keyIdx = 1;
                else if (multiTitle1.indexOf("," + attr.KeyOfEn + ",") != -1)
                    keyIdx = 2;
                else
                    keyIdx = 3;

                if (keyIdx == 3) {
                    if (thrcolspan != 0) {
                        _html += "<th colspan=" + thrcolspan + " style='text-align:center'>" + curThrGroup + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button id='Btn_Delete' onclick=DeleteSpecTitle('" + curThrGroup + "',1)> 删除</button></th>";
                        thrcolspan = 0;
                        curThrGroup = "";

                    }

                    _html += "<th rowspan=3><label><input name='oneclo' id='" + attr.KeyOfEn + "' value='" + idx1 + "' type='checkbox'/>" + attr.Name + "</label></th>";
                    continue;
                }

                //属于三级分组下面的字段
                if (keyIdx == 2) {

                    var fields = getMutliFile(attr.KeyOfEn, multiTitle1);
                    if (fields != "" && (curThrGroup == "" || curThrGroup != fields[0])) {
                        if (curThrGroup != "" && curThrGroup != fields[0]) {
                            _html += "<th colspan=" + thrcolspan + " style='text-align:center'>" + curThrGroup + "&nbsp;<button id='Btn_Delete' onclick=DeleteSpecTitle('" + curThrGroup + "',1)> 删除</button></th>";
                            thrcolspan = 0;
                        }
                        thrcolspan += 1;
                        curThrGroup = fields[0];

                    } else {
                        thrcolspan += 1;
                    }
                    _secHtml += "<th rowspan=2>" + attr.Name + "</th>";
                    continue;
                }
                //属于二级分组下的字段
                if (keyIdx == 1) {

                    //增加字段
                    _thrHtml += "<th><label>" + attr.Name + "</label></th>";
                    var secfields = getMutliFile(attr.KeyOfEn, multiTitle);

                    //判断是否在三级分组列表下
                    if (multiTitle1.indexOf("," + secfields[0] + ",") != -1) {
                        if (secfields != "" && (curSecGroup == "" || curSecGroup != secfields[0])) {
                            _secHtml += "<th rowspan=1 colspan=" + (secfields.length - 1) + " style='text-align:center' >" + secfields[0] + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button id='Btn_Delete' onclick=DeleteSpecTitle('" + secfields[0] + "',0)> 删除</button></th>";
                            curSecGroup = secfields[0];
                            isSecChange = true;
                            idx1++;
                        } else {
                            isSecChange = false;
                        }
                        var thrfields = getMutliFile(secfields[0], multiTitle1);
                        if (thrfields != "" && (curThrGroup == "" || curThrGroup != thrfields[0])) {
                            thrcolspan += secfields.length - 1;
                            curThrGroup = thrfields[0];
                            if (curThrGroup != "" && curThrGroup != thrfields[0]) {
                                _html += "<th colspan=" + thrcolspan + " style='text-align:center'>" + thrfields[0] + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button id='Btn_Delete' onclick=DeleteSpecTitle('" + thrfields[0] + "',1)> 删除</button></th>";

                                thrcolspan = 0;
                            }
                        } else {
                            if (isSecChange == true)
                                thrcolspan += parseInt(secfields.length - 1);
                        }
                        //一级标题占两行
                    } else {
                        if (thrcolspan != 0) {
                            _html += "<th colspan=" + thrcolspan + " style='text-align:center'>" + curThrGroup + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button id='Btn_Delete' onclick=DeleteSpecTitle('" + curThrGroup + "',1)> 删除</button></th>";
                            thrcolspan = 0;
                        }
                        curThrGroup = "";
                        thrIdx = 0;
                        if (secfields != "" && (curSecGroup == "" || curSecGroup != secfields[0])) {
                            _html += "<th rowspan=2 colspan=" + (secfields.length - 1) + " style='text-align:center' ><input  id='" + secfields[0] + "' value='" + secfields[0] + "' type='checkbox'/> " + secfields[0] + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button id='Btn_Delete' onclick=DeleteSpecTitle('" + secfields[0] + "',0)> 删除</button></th>";
                            curSecGroup = secfields[0];
                            idx1++;
                        }
                    }

                }
            }
            _html += "</tr>";
            _html += "<tr>" + _secHtml + "</tr>";
            _html += "<tr>" + _thrHtml + "</tr>";
            return _html;
        }

        function DeleteSpecTitle(title, multiType) {

            if (window.confirm('您确定要删除【' + title + '】吗?') == false)
                return;

            //按照;分开.
            var strs = [];
            if (multiType == 0)
                strs = multiTitle.split(';');
            else
                strs = multiTitle1.split(';');

            var newTitle = ""; //创建新的strs.
            for (var i = 0; i < strs.length; i++) {

                var str = strs[i];
                if (str.indexOf(title + ',') == 0)
                    continue;
                newTitle += str + ";"; //重新组合newtitle.
            }
            newTitle = newTitle.substr(0, newTitle.length - 1);
            if (multiType == 0)
                enEntity.SetPara("MultiTitle", newTitle);
            else
                enEntity.SetPara("MultiTitle1", newTitle);
            enEntity.Update();


            Reload();
           // window.Reload();
           // SetHref( window.location;
        }

        function getMutliFile(keyOfEn, multi) {

            var fields = multi.split(";");
            for (var i = 0; i < fields.length; i++) {
                var str = fields[i];
                if (str == "")
                    continue;
                if (str.indexOf("," + keyOfEn + ",") == -1)
                    continue;
                var strs = str.substring(0, str.length - 1).split(",");
                return strs;
            }
            return "";
        }

        function AddGroup() {

            //检查设置的完整性.
            //求出来选择的字段.
            var filds = "";
            var inputArray = $("input[name='oneclo']:checked"); //取到所有的input 并且放到一个数组中
            for (var i = 0; i < inputArray.length; i++) {
                var input = inputArray[i];
                filds += input.id + ",";//获得选中的input的id拼接成字符串
            }
            // 1. 选择的数量小于等于1 是错误的.
            var fls = filds.split(',');
            if (fls.length - 1 <= 1) {
                alert("所选的分组不可少于一列");
                return;
            }
            // 2. 选择的没有按照连续选择，也是错误的.
            for (var i = 0; i < inputArray.length; i++) {
                //比较次数在inputArray.length之内
                if (i + 1 < inputArray.length) {
                    //根据value的值判断是否是连续的列
                    if (parseInt(inputArray[i].value) + 1 != inputArray[i + 1].value) {
                        alert("所选的列不连续！");
                        return;
                    }
                }
            }
            // 3. 选择的字段，在历史的选择中出现也是错误的.
            if (multiTitle != undefined) {
                for (var i = 0; i < fls.length; i++) {
                    if (multiTitle != "" && multiTitle.indexOf(fls[i]) > 0) {
                        alert("错误:该列已经选择过.");
                        return;
                    }
                }
            }
            //获取分组名称；
            var name = prompt("输入一级表头名称", "");
            if (name == null)
                return;
            //检查名称是否重复
            if (multiTitle != undefined && multiTitle.indexOf(name) > 0) {
                alert("错误:名称已经存在.");
                return;
            }

            //拼接目标数据.
            multiTitle += name + "," + filds + ";";
            //赋值
            enEntity.SetPara("MultiTitle", multiTitle);
            enEntity.Update();
            Reload();
        }
        function AddGroup2() {

            //检查设置的完整性.
            //求出来选择的字段.
            var filds = "";
            var inputArray = $("input[type='checkbox']:checked"); //取到所有的input 并且放到一个数组中
            for (var i = 0; i < inputArray.length; i++) {
                var input = inputArray[i];
                filds += input.id + ",";//获得选中的input的id拼接成字符串
            }
            // 1. 选择的数量小于等于1 是错误的.
            var fls = filds.split(',');
            if (fls.length - 1 <= 1) {
                alert("所选的分组不可少于一列");
                return;
            }
            // 2. 选择的没有按照连续选择，也是错误的.
            var curIdx = 0;
            for (var idx = 0; idx < mapAttrs.length; idx++) {
                var attr = mapAttrs[idx];
                if (attr.UIVisible == 0) {
                    if (curIdx != 0) curIdx++;
                    continue;
                }
                if (filds.indexOf(mapAttrs[idx].KeyOfEn + ",") != -1) {
                    if (curIdx != 0 && (curIdx + 1) != idx) {
                        alert("所选的列不连续！");
                        return;
                    }
                    curIdx = idx;
                } else {
                    var secFile = getMutliFile(mapAttrs[idx].KeyOfEn, multiTitle)
                    if (secFile != "" && filds.indexOf(secFile[0] + ",") != -1) {
                        if (multiTitle.indexOf(mapAttrs[idx].KeyOfEn + ",") != -1) {
                            if (curIdx != 0 && (curIdx + 1) != idx) {
                                alert("所选的列不连续！");
                                return;
                            }
                            curIdx = idx;
                        }
                    }


                }

            }

            // 3. 选择的字段，在历史的选择中出现也是错误的.
            if (multiTitle1 != undefined) {
                for (var i = 0; i < fls.length; i++) {
                    if (multiTitle1 != "" && multiTitle1.indexOf(fls[i]) > 0) {
                        alert("错误:该列已经选择过.");
                        return;
                    }
                }
            }
            //获取分组名称；
            var name = prompt("输入二级表头名称", "");
            if (name == null)
                return;
            //检查名称是否重复
            if (multiTitle1 != undefined && multiTitle1.indexOf(name) > 0) {
                alert("错误:名称已经存在.");
                return;
            }

            //拼接目标数据.
            multiTitle1 += name + "," + filds + ";";

            //赋值
            enEntity.SetPara("MultiTitle1", multiTitle1);
            enEntity.Update();
            Reload();
        }

        /*
            function Help() {
            var url = "../Sys/Img/MuLtiTitLe.gif";
            window.open(url);
        }
        */
        function ClearAll() {
            enEntity.SetPara("MultiTitle", "");
            enEntity.SetPara("MultiTitle1", "");
            enEntity.Update();
            Reload();
        }
    </script>
</head>
<body>

    <h5>多表头设置</h5>

    <table style="position:relative;width:100%;" id="Table">
    </table>

    <div style="right:30px; position:absolute; z-index:100; ">
    </div>

    <button id="Btn_Add" onclick="AddGroup()"> 增加一级表头</button>
    <button id="Btn_Add" onclick="AddGroup2()"> 增加二级表头</button>
    <button id="Btn_Clear" onclick="ClearAll()"> 清除全部设置</button>
    <!--<button id="Btn_Help" onclick="Help()"> 动画演示</button>-->

    <br />
    <fieldset>
        <legend>设置帮助 </legend>
        <ul>
            <li> 规则：多个列合并为一级表头，多个一级表头合并为二级表头，最高支持二级表头</li>
            <li>
                <fieldset>
                    <legend>示例</legend>
                    <img alt="" src="../Sys/Img/MuLtiTitLe1.png" onclick="WinOpen('../Sys/Img/MuLtiTitLe1.png')" style="width: 500px;" />
                </fieldset>
            </li>
            <li> 我们没有解决不按照规则操作带来的错误。</li>
            <li> 如果设置的格式混乱，请使用【清除全部设置】重新设置。</li>
        </ul>
    </fieldset>

</body>
</html>